<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Hotel Booking List</title>
  </head>
  <body>
    <div id="hotel_search_form"></div>
    <div id="hotelordersgrid" style="height:280px;">
    </div>
    <script>
        //Ext.namespace("trailblazer.user");
        /*
         * Ext JS Library 2.2
         * Copyright(c) 2006-2008, Ext JS, LLC.
         * licensing@extjs.com
         *
         * http://extjs.com/license
         */
        //为了一般JS方法可以调用，这个变量定义要放在onReady外面．
        var hotelOrderDS;
        Ext.onReady(function(){
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            // fix the bug in codepress - resize
            //Ext.BoxComponent.prototype.setSize('100%', '125px');
            /************************************************************
             * Display the result in page
             * the column model has information about grid columns
             * dataIndex maps the column to the specific data field in
             * the data store (created below)
             ************************************************************/
            var statusArray = [['已确认', '已确认'], ['已结账', '已结账']];
            var statusReader = new Ext.data.ArrayReader({
                id: 0
            }, [{
                    name: 'value'
                }, {
                    name: 'key'
                }]);
            var statusStore = new Ext.data.Store({
                reader: statusReader
            });
            statusStore.loadData(statusArray);
            var status = new Ext.form.ComboBox({ //combobox   
                name: 'status',
                fieldLabel: '状态',
                resiable: true,
                typeAhead: true,
                handleHeight: 100, //   
                displayField: 'key',
                valueField: 'value',
                selectOnFocus: true,
                mode: 'local',
                selectOnFocus: true,
                triggerAction: 'all',//这个属性非常重要,可以在选择一个值以后,依然还显示其它的值.
                readOnly: true,
                emptyText: '选择类型...',
                store: statusStore, //数据储存到这个comboBox   
                anchor: '90%'
            });
            var searchDateBegin = new Ext.form.DateField({
                fieldLabel: '<span class="red">*</span>开始日期',
                name: 'search_date_begin',
                id: 'search_date_begin',
                format: 'Y-m-d', //格式化日期   
                width: '80',
                //disabledDays: [0,6],	//不让选择周六，周日   
                //disabledDaysText: "周末要休息",   
                invalidText: "您输入的日期格式不对，正确格式为2008-01-01",
                allowBlank: false,
                inputType: '2008-01-01',
                anchor: '90%',
                vtype: 'daterange',
                endDateField: 'search_date_end'
            });
            
            var searchDateEnd = new Ext.form.DateField({
                fieldLabel: '<span class="red">*</span>结束日期',
                name: 'search_date_end',
                id: 'search_date_end',
                format: 'Y-m-d', //格式化日期   
                width: '80',
                //disabledDays: [0,6],	//不让选择周六，周日   
                //disabledDaysText: "周末要休息",   
                invalidText: "您输入的日期格式不对，正确格式为2008-01-01",
                allowBlank: false,
                inputType: '2008-01-01',
                anchor: '90%',
                vtype: 'daterange',
                startDateField: 'search_date_begin'
            });
            var myHotelOrder = new Ext.form.Checkbox({
                fieldLabel: '我的订单',
                hideLabel: true,
                boxLabel: '我的订单',
                name: 'my_hotel_order',
                checked: true,
                anchor: '100%'
            });
            var searchButton = new Ext.Button({
                text: '搜 索',
                handler: searchHotelOrder
            })
            var searchFormPanel = new Ext.form.FormPanel({
                baseCls: 'x-plain',
                labelWidth: 60,
                width: '800',
                labelAlign: 'right',
                //url: '/admin/addAirways',
                //defaultType: 'textfield',
                items: [{
                        layout: 'column',
                        border: false,
                        items: [{
                                columnWidth: .2,
                                layout: 'form',
                                border: false,
                                items: [status]
                            },{
                                columnWidth: .25,
                                layout: 'form',
                                border: false,
                                items: [searchDateBegin]
                            },{
                                columnWidth: .25,
                                layout: 'form',
                                border: false,
                                items: [searchDateEnd]
                            },{
                                columnWidth: .2,
                                layout: 'form',
                                border: false,
                                items: [myHotelOrder]
                            }, {
                                columnWidth: .1,
                                layout: 'form',
                                border: false,
                                items: [searchButton]
                            }]
                    }]
            });
            searchFormPanel.render('hotel_search_form');
            function searchHotelOrder(){
                if (searchFormPanel.form.isValid()) {
                    hotelOrderDS.baseParams.date_begin = Ext.util.Format.date(searchDateBegin.getValue(), 'Y-m-d');
                    hotelOrderDS.baseParams.date_end = Ext.util.Format.date(searchDateEnd.getValue(), 'Y-m-d');
                    hotelOrderDS.baseParams.status = status.getValue();
                    hotelOrderDS.baseParams.my_hotel_order = myHotelOrder.getValue();
                    hotelOrderDS.load({
                        params: {
                            start: 0,
                            limit: 20
                        }
                    });
                }
            }
            //----------------------------------------------------------------------------
            var hotelOrderCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 50,
                    hidden: true
                }, {
                    header: "客户姓名",
                    width: 70,
                    dataIndex: 'customer_name'
                }, {
                    header: "客户电话",
                    width: 60,
                    dataIndex: 'customer_phone'
                }, {
                    header: "订房人姓名",
                    width: 100,
                    dataIndex: 'roomer_name'
                }, {
                    header: "订房人电话",
                    width: 60,
                    dataIndex: 'roomer_phone'
                }, {
                    header: "房间类型",
                    width: 50,
                    dataIndex: 'room_type'
                }, {
                    header: "房间数量",
                    width: 45,
                    dataIndex: 'room_number'
                }, {
                    header: "入住人数",
                    width: 45,
                    dataIndex: 'people_number'
                }, {
                    header: "入住天数",
                    width: 45,
                    dataIndex: 'day_number'
                }, {
                    header: "入住日期",
                    width: 50,
                    dataIndex: 'date_begin',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d')
                }, {
                    header: "离店日期",
                    width: 50,
                    dataIndex: 'date_end',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d')
                }, {
                    header: "最早入住",
                    width: 50,
                    dataIndex: 'time_begin'
                }, {
                    header: "最晚入住",
                    width: 50,
                    dataIndex: 'time_end'
                }, {
                    header: "房间售价",
                    width: 50,
                    dataIndex: 'room_price'
                }, {
                    header: "房间底价",
                    width: 50,
                    dataIndex: 'cost_price'
                }, {
                    header: "操作员",
                    width: 50,
                    dataIndex: 'user_name'
                }, {
                    header: "订单状态",
                    width: 40,
                    dataIndex: 'status'
                }, {
                    header: "订单时间",
                    width: 100,
                    dataIndex: 'created_at',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                }]);
                
            /************************************************************
             * connect to backend - grid - core part
             * create the Data Store
             *   connect with backend and list the result in page
             *   through JSON format
             ************************************************************/
            hotelOrderDS = new Ext.data.Store({
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                proxy: new Ext.data.HttpProxy({
                    url: '/orders/getHotelOrders'
                }),
                // create reader that reads the Topic records
                reader: new Ext.data.JsonReader({
                    root: 'root',
                    totalProperty: 'totalProperty',
                    id: 'id'
                }, [{
                        name: 'id'
                    }, {
                        name: 'customer_name',
                        mapping: 'customer.name'
                    }, {
                        name: 'customer_phone',
                        mapping: 'customer.phone'
                    }, {
                        name: 'roomer_name'
                    }, {
                        name: 'roomer_phone'
                    }, {
                        name: 'room_type'
                    }, {
                        name: 'room_number'
                    }, {
                        name: 'people_number'
                    }, {
                        name: 'day_number'
                    }, {
                        name: 'date_begin'
                    }, {
                        name: 'date_end'
                    }, {
                        name: 'time_begin'
                    }, {
                        name: 'time_end'
                    }, {
                        name: 'room_price'
                    }, {
                        name: 'cost_price'
                    }, {
                        name: 'pay_type'
                    }, {
                        name: 'remark'
                    }, {
                        name: 'user_name',
                        mapping: 'user.user_name'
                    }, {
                        name: 'status'
                    }, {
                        name: 'created_at'
                    }])
            });
                
                
            /************************************************************
             * add a paging toolbar to the grid's footer
             ************************************************************/
            var myPagingToolbar = new Ext.PagingToolbar({
                pageSize: 10,
                displayInfo: true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: "没有记录",
                store: hotelOrderDS
            });
                
            /************************************************************
             * Define menubar now in here
             *   add and delete functions
             ************************************************************/
            var menubar = [{
                    text: '增加酒店订单',
                    //tooltip: '增加酒店订单',
                    iconCls: 'addItem',
                    handler: function(){
                        CreateHotelOrder(hotelOrderDS,<%=@customer_id%>);
                    }
                }, '-', {
                    text: '删除酒店订单',
                    tooltip: '删除酒店订单',
                    iconCls: 'remove',
                    handler: function(){
                        // delete customer now - action
                        DeleteHotelOrder(hotelOrderDS, hotelOrderGridPanel);
                    }
                }, '-', {
                    text: '编辑酒店订单',
                    tooltip: '编辑酒店订单',
                    iconCls: 'editItem',
                    handler: function(){
                        // delete costlevel now - action
                        EditHotelOrder(hotelOrderDS, hotelOrderGridPanel);
                    }
                }];
            /************************************************************
             * define grid panel now
             ************************************************************/
            var hotelOrderGridPanel = new Ext.grid.GridPanel({
                border: false,
                el: 'hotelordersgrid',
                ds: hotelOrderDS,
                cm: hotelOrderCM,
                autoWidth: true,
                viewConfig: {
                    forceFit: true
                },
                loadMask: true,
                iconCls: 'icon-grid',
                collapsible: true,
                animCollapse: false,
                autoWidth: true,
                //frame: true,
                title: '酒店订单列表',
                height: 500,
                tbar: menubar,
                bbar: myPagingToolbar
            });
                
            //panel render
            hotelOrderGridPanel.render();
            // trigger the data store load
            hotelOrderDS.load({
                params: {
                    start: 0,
                    limit: 20
                }
            });
                
            /************************************************************
             * Action - edit
             *   handle double click
             *   user select one of the item and want to update it
             ************************************************************/
            hotelOrderGridPanel.on('rowdblclick', function(hotelOrderGridPanel, rowIndex, e){
                var selectedId = hotelOrderDS.data.items[rowIndex].id;
                passengerDS.baseParams.customer_id = selectedId;
                passengerDS.load();
            });
        });
    </script>
  </body>
</html>
